<template>
  <div id="rightmenu-mask"
       :style="siteRightMenuShow ? {display: 'block'} : {display: 'none'}"
       @click="theme.hideRightMenu()"></div>
  <div id="rightMenu"
       :style="siteRightMenuShow ? {display: 'block' , top : siteRightMenuXPx + 'px' , left : siteRightMenuYPx + 'px'} : {display: 'none'}">
    <div class="rightMenu-group rightMenu-small">
      <div class="rightMenu-item" id="menu-backward" @click="right.toHome">
        <i class="haofont hao-icon-Home"></i>
      </div>
      <div class="rightMenu-item" id="menu-backward" @click="right.backward">
        <i class="haofont hao-icon-arrow-left"></i>
      </div>
      <div class="rightMenu-item" id="menu-forward" @click="right.forward">
        <i class="haofont hao-icon-arrow-right"></i>
      </div>
      <div class="rightMenu-item" id="menu-refresh" @click="right.refresh">
        <i class="haofont hao-icon-arrow-rotate-right"></i>
      </div>
      <div class="rightMenu-item" id="menu-top" @click="right.top">
        <i class="haofont hao-icon-arrow-up"></i>
      </div>
    </div>
    <div class="rightMenu-group rightMenu-line rightMenuPlugin"
         :style="{display: showRightMenuPlugin ? 'block' : 'none'}">
      <div class="rightMenu-item" id="menu-copytext" :style="{display: showRightMenuCopyText ? 'block' : 'none'}"
           @click="right.copyText(selectTextNow)">
        <i class="haofont hao-icon-copy"></i>
        <span>复制选中文本</span>
      </div>
      <div class="rightMenu-item" id="menu-pastetext" :style="{display: showRightMenuPasteText ? 'block' : 'none'}"
           @click="right.pasteText">
        <i class="haofont hao-icon-paste"></i>
        <span>粘贴文本</span>
      </div>
      <a class="rightMenu-item" id="menu-commenttext" :style="{display: showRightMenuCommentText ? 'block' : 'none'}"
         @click="right.commentText(selectTextNow)">
        <i class="haofont hao-icon-comment-medical"></i>
        <span>引用到评论</span>
      </a>
      <div class="rightMenu-item" id="menu-newwindow" :style="{display: showRightMenuNewWindow ? 'block' : 'none'}"
           @click="right.newWindow(currentHref)">
        <i class="haofont hao-icon-window-restore"></i>
        <span>新窗口打开</span>
      </div>
      <div class="rightMenu-item" id="menu-copylink" :style="{display: showRightMenuCopyLink ? 'block' : 'none'}"
           @click="right.copyLink(currentHref)">
        <i class="haofont hao-icon-link"></i>
        <span>复制链接地址</span>
      </div>
      <div class="rightMenu-item" id="menu-copyimg" :style="{display: showRightMenuCopyImg ? 'block' : 'none'}"
           @click="right.copyImage(currentImageSrc)">
        <i class="haofont hao-icon-images"></i>
        <span>复制此图片</span>
      </div>
      <div class="rightMenu-item" id="menu-downloadimg" :style="{display: showRightMenuDownloadImg ? 'block' : 'none'}"
           @click="right.downloadImage(currentImageSrc)">
        <i class="haofont hao-icon-download"></i>
        <span>下载此图片</span>
      </div>
      <div class="rightMenu-item" id="menu-newwindowimg"
           :style="{display: showRightMenuNewWindowImg ? 'block' : 'none'}"
           @click="right.newWindowOpenImage(currentImageSrc)">
        <i class="haofont hao-icon-window-restore"></i>
        <span>新窗口打开图片</span>
      </div>
      <div class="rightMenu-item" id="menu-search" :style="{display: showRightMenuSearch ? 'block' : 'none'}">
        <i class="haofont hao-icon-search--line"></i>
        <span>站内搜索</span>
      </div>
      <div class="rightMenu-item" id="menu-searchBaidu" :style="{display: showRightMenuSearchBaidu ? 'block' : 'none'}"
           @click="right.baiduSearch(selectTextNow)">
        <i class="haofont hao-icon-baidu"></i>
        <span>百度搜索</span>
      </div>
      <div class="rightMenu-item" id="menu-music-toggle" :style="{display: showRightMenuMusicToggle ? 'block' : 'none'}"
           @click="right.musicToggle">
        <i :class="['haofont' , siteMusicPlay ? 'hao-icon-pause' : 'hao-icon-play']"></i>
        <span>{{ siteMusicPlay ? '暂停音乐' : '播放音乐' }}</span>
      </div>
      <div class="rightMenu-item" id="menu-music-back" :style="{display: showRightMenuMusicBack ? 'block' : 'none'}"
           @click="right.backMusic">
        <i class="haofont hao-icon-backward"></i>
        <span>切换到上一首</span>
      </div>
      <div class="rightMenu-item" id="menu-music-forward"
           :style="{display: showRightMenuMusicForward ? 'block' : 'none'}" @click="right.forwardMusic">
        <i class="haofont hao-icon-forward"></i>
        <span>切换到下一首</span>
      </div>
      <div class="rightMenu-item" id="menu-music-playlist"
           :style="{display: showRightMenuMusicPlaylist ? 'block' : 'none'}" @click="right.musicPlayList">
        <i class="haofont hao-icon-radio"></i>
        <span>查看所有歌曲</span>
      </div>
      <div class="rightMenu-item" id="menu-music-copyMusicName"
           :style="{display: showRightMenuMusicCopyMusicName ? 'block' : 'none'}" @click="right.copyMusicName">
        <i class="haofont hao-icon-copy"></i>
        <span>复制歌名</span>
      </div>
    </div>
    <div class="rightMenu-group rightMenu-line rightMenuOther"
         :style="{display: showRightMenuOther ? 'block' : 'none'}">
      <a class="rightMenu-item menu-link" id="menu-randomPost" @click="right.toRandomPost">
        <i class="haofont hao-icon-shuffle"></i>
        <span>随便逛逛</span>
      </a>
      <a class="rightMenu-item menu-link" href="#categories">
        <i class="haofont hao-icon-cube"></i>
        <span>博客分类</span>
      </a>
      <a class="rightMenu-item menu-link" href="#tags">
        <i class="haofont hao-icon-tags"></i>
        <span>文章标签</span>
      </a>
    </div>
    <div class="rightMenu-group rightMenu-line">
      <a class="rightMenu-item menu-link" href="#cc">
        <i class="haofont icon-hand-holding"></i>
        <span>隐私协议</span>
      </a>
      <a class="rightMenu-item menu-link" href="#cc">
        <i class="haofont icon-closed-captioning"></i>
        <span>版权协议</span>
      </a>
    </div>
    <div class="rightMenu-group rightMenu-line rightMenuOther"
         :style="{display: showRightMenuOther ? 'block' : 'none'}">
      <div class="rightMenu-item" id="menu-copy" @click="right.copyUrl">
        <i class="haofont hao-icon-copy"></i>
        <span>复制地址</span>
      </div>
      <div class="rightMenu-item" id="menu-commentBarrage"
           rel="external nofollow noreferrer" draggable="false" style="display: flex;"
           @click="right.switchCommentBarrage">
        <i class="haofont hao-icon-chat--fill" style="font-size: 19px;"></i>
        <span class="menu-commentBarrage-text">{{ commentBarrage ? '关闭热评' : '打开热评' }}</span>
      </div>
      <div class="rightMenu-item" id="menu-darkmode" @click="right.switchThemeMode">
        <i class="haofont hao-icon-moon-clear-fill" style="font-size: 19px;"></i>
        <span class="menu-darkmode-text">
          {{ siteThemeMode === 'dark' ? '浅色模式' : '深色模式' }}
        </span>
      </div>
      <div class="rightMenu-item" id="menu-translate" @click="right.translate">
        <i class="haofont hao-icon-fanti" style="font-size: 19px;"></i>
        <span>轉為繁體</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, ref, onMounted, onBeforeUnmount} from 'vue';
import store from "../../store/index.js";
import toolJs from "../../utils/tool/index.js";
import themeJS from "../../utils/theme/index.js";
import rightJs from "../../utils/right/index.js";

const globalEvent = ref(null);
const currentHref = ref("");
const currentImageSrc = ref("");
const selectTextNow = ref("");
const showRightMenuOther = ref(true);
const showRightMenuPlugin = ref(true);
const showRightMenuCopyText = ref(true);
const showRightMenuPasteText = ref(true);
const showRightMenuCommentText = ref(true);
const showRightMenuNewWindow = ref(true);
const showRightMenuNewWindowImg = ref(true);
const showRightMenuCopyLink = ref(true);
const showRightMenuCopyImg = ref(true);
const showRightMenuDownloadImg = ref(true);
const showRightMenuSearch = ref(true);
const showRightMenuSearchBaidu = ref(true);
const showRightMenuMusicToggle = ref(true);
const showRightMenuMusicBack = ref(true);
const showRightMenuMusicForward = ref(true);
const showRightMenuMusicPlaylist = ref(true);
const showRightMenuMusicCopyMusicName = ref(true);

const theme = computed(() => themeJS);
const tool = computed(() => toolJs);
const right = computed(() => rightJs);
const siteRightMenuShow = computed(() => store.state.page.siteRightMenuShow);
const siteRightMenuXPx = computed(() => store.state.page.siteRightMenuXPx);
const siteRightMenuYPx = computed(() => store.state.page.siteRightMenuYPx);
const siteThemeMode = computed(() => store.state.page.siteThemeMode);
const siteMusicPlay = computed(() => store.state.page.siteMusicPlay);
const commentBarrage = computed(() => store.state.page.commentBarrage);

const keydownHandler = (e) => {
  if ((e.ctrlKey || e.metaKey) && (e.keyCode === 67) && (selectTextNow.value !== '')) {
    toolJs.snackbarShow('复制成功，复制和转载请标注本文地址');
    toolJs.rightMenuCopyText(selectTextNow.value);
    e.preventDefault();
  }
}

const initRightMenu = (event) => {
  if (document.body.clientWidth > 768) {
    // 加10是为了防止显示时鼠标遮在菜单上
    let pageX = event.clientX + 10;
    let pageY = event.clientY;
    // 其他额外菜单
    let href = event.target.href;
    let imgSrc = event.target.currentSrc;
    // 判断模式 扩展模式为有事件
    let pluginMode = false;
    showRightMenuOther.value = true;
    globalEvent.value = event;
    // 检查是否需要复制 是否有选中文本
    if (selectTextNow.value && window.getSelection()) {
      pluginMode = true;
      showRightMenuCopyText.value = true;
      showRightMenuCommentText.value = true;
      showRightMenuSearch.value = true;
      showRightMenuSearchBaidu.value = true;
    } else {
      showRightMenuCopyText.value = false;
      showRightMenuCommentText.value = false;
      showRightMenuSearch.value = false;
      showRightMenuSearchBaidu.value = false;
    }
    // 检查是否右键点击了链接 a 标签
    if (href) {
      pluginMode = true;
      showRightMenuNewWindow.value = true;
      showRightMenuCopyLink.value = true;
      currentHref.value = href;
    } else {
      showRightMenuNewWindow.value = false;
      showRightMenuCopyLink.value = false;
    }
    // 检查是否需要复制图片
    if (imgSrc) {
      pluginMode = true;
      showRightMenuCopyImg.value = true;
      showRightMenuDownloadImg.value = true;
      showRightMenuNewWindowImg.value = true;
      currentImageSrc.value = imgSrc;
    } else {
      showRightMenuCopyImg.value = false;
      showRightMenuDownloadImg.value = false;
      showRightMenuNewWindowImg.value = false;
    }
    // 判断是否为输入框
    if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'textarea') {
      pluginMode = true;
      showRightMenuPasteText.value = true;
    } else {
      showRightMenuPasteText.value = false;
    }
    // 判断是否是音乐
    const navMusicEl = document.querySelector("#nav-music");
    if (navMusicEl && navMusicEl.contains(event.target)) {
      pluginMode = true;
      showRightMenuMusicToggle.value = true;
      showRightMenuMusicBack.value = true;
      showRightMenuMusicForward.value = true;
      showRightMenuMusicPlaylist.value = true;
      showRightMenuMusicCopyMusicName.value = true;
    } else {
      showRightMenuMusicToggle.value = false;
      showRightMenuMusicBack.value = false;
      showRightMenuMusicForward.value = false;
      showRightMenuMusicPlaylist.value = false;
      showRightMenuMusicCopyMusicName.value = false;
    }
    // 如果不是扩展模式则隐藏扩展模块
    if (pluginMode) {
      showRightMenuOther.value = false;
      showRightMenuPlugin.value = true;
    } else {
      showRightMenuPlugin.value = false;
    }
    // 获取元素的高度
    const element = document.getElementById('rightMenu');
    // 或者其他可见状态，比如 visibility: visible;
    element.style.display = 'block';
    const rmWidth = element.offsetWidth;
    let rmHeight = element.offsetHeight;
    if (rmHeight > 1000) {
      rmHeight = rmHeight / 2;
    }
    // 或者其他隐藏状态，比如 visibility: hidden;
    element.style.display = 'none';
    // 鼠标默认显示在鼠标右下方，当鼠标靠右或考下时，将菜单显示在鼠标左方\上方
    if (pageX + rmWidth > window.innerWidth) {
      pageX -= rmWidth + 10;
    }
    if (pageY + rmHeight > window.innerHeight) {
      pageY -= pageY + rmHeight - window.innerHeight;
      pageY -= 10;
    }
    themeJS.showRightMenu(true, pageY, pageX);
    document.getElementById('rightmenu-mask').style.display = 'flex';
    event.preventDefault();
    return false;
  }
}

onMounted(() => {
  document.querySelectorAll('.menu-link').forEach(function (el) {
    el.addEventListener('click', themeJS.hideRightMenu);
  });

  document.getElementById('rightmenu-mask').addEventListener('contextmenu', function (event) {
    event.preventDefault();
    themeJS.hideRightMenu();
  });

  document.onmouseup = document.ondblclick = toolJs.selectText();
  selectTextNow.value = toolJs.selectText();

  window.oncontextmenu = (event) => {
    initRightMenu(event);
  };

  document.addEventListener('keydown', keydownHandler);
});

onBeforeUnmount(() => {
  // 确保不会多次绑定事件处理程序
  document.removeEventListener('keydown', keydownHandler);
});
</script>

<style scoped>

</style>